<template>
  <div class="body-layout">
    <header class="top-header">
      <!-- 返回按钮 -->
      <a @click="$router.back(-1);" class="header-left"></a>
      <article class="header-middle">我的收藏</article>
    </header>
    <!-- 我的收藏 -->
    <div class="marginTop44">


      <div class="vf-news" ref="colList">
        <div class="vf-news-list">
          <article class="vf-news-list_con border-bottom"
                   :class="[item.img_list.length >= 3 ? 'vf-news-list_con-three' : 'vf-news-list_con-LR']"
                   v-for="item in userCollection" :key="item.view_id" v-stat='{action_type:2,button_type:27}'>
            <a v-if="item.img_list.length >= 3" @click="goDetail(item.view_id)">
              <h3 class="title">{{item.view_title}}</h3>
              <div class="news-info">
                <img v-for="(img,index) in item.img_list" :src="img.url" alt="" v-if="index<3">
              </div>
              <div class="title-tips">
                <span class="news-scour" @click.stop="goLvd(item.author_id)"><img
                  src="../assets/images/icon-v.png"/>{{item.author_name}}</span>
                <span class="reply">评论{{item.comment_amount}}</span>
                <span class="pubtime" v-if="item.publish_time">{{item.publish_time}}</span>
              </div>
            </a>

            <a v-else @click="goDetail(item.view_id)">
              <div class="news-info">
                <h3 class="title">{{item.view_title}}</h3>
                <div class="title-tips">
                  <span class="news-scour"><img src="../assets/images/icon-v.png"/>{{item.author_name}}</span>
                  <span class="reply">评论{{item.comment_amount}}</span>
                  <span class="pubtime" v-if="item.publish_time">{{item.publish_time}}</span>
                </div>
              </div>
              <div class="news-img">
                <img v-for="(img,index) in item.img_list" :src="img.url" alt="" v-show="index<1">
              </div>
            </a>
          </article>
          <article class="vf-bottom-tps">
            <div class="vf-bottom-tps_line" v-show="bottomText.length>0">
              <span>{{bottomText}}</span>
            </div>
          </article>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import util from '@/lib/util.js'
  import Bscroll from 'better-scroll'

  export default {
    name: 'MyCollection',

    data() {
      return {
        userCollection: [],
        downFlag: true,
        sw: true,
        lastId: 0,
        height: 0,
        bottomText: "",//底部提示文字
        pageSize: 10//分页的页面大小
      }
    },
    created: function () {
      util.vars.in_time = new Date().getTime();
      // 登录判断
      this.$parent.login(7).then((res) => {
        this.getuserCollection();
      });
    },
    methods: {
      getuserCollection() {
        if (!this.downFlag) {
          return false;
        }
        let ori_last_id = this.lastId;
        util.ajax.get(`/user/collect/list?last_id=${this.lastId}&page_size=${this.pageSize}`).then((res) => {
          let list = res.data || [], curview_ids = [];
          //排重操作，避免直接使用concat可能导致的重复请求bug  by tiansx 20180628
          this.userCollection.forEach((view, i) => {
            curview_ids.push(view.view_id);
          });

          list.forEach((item, index) => {
            if (curview_ids.indexOf(item.view_id) === -1) {
              //格式化时间
              if (item['publish_time']) {
                item['publish_time'] = util.formatDate(item['publish_time']);
              }
              this.userCollection.push(item);
            }
          });


//           list = res.data.map(item => {
//            if (item['publish_time']) {
//              item['publish_time'] = util.formatDate(item['publish_time']);
//              return item
//            }
//          });

          // this.userCollection = this.userCollection.concat(res.data);

          if (list.length < this.pageSize) {
            this.downFlag = false;
            //如果第一页就加载完毕，则不显示文字
            if (ori_last_id === 0) {
              this.bottomText = "";
            } else {
              this.bottomText = "您太勤奋了，没有更多了";
            }
          } else {
            this.downFlag = true;
            this.bottomText = "加载中";
          }

          // 数据加载完毕
          this.sw = true;

          // 取最后一条数据id
          if (res.data.length > 0) {
            let len = res.data.length - 1;
            this.lastId = res.data[len].id;
          }

        });
      },

      goDetail(viewId) {
        this.$router.push({path: "/pages/Detail", query: {id: viewId}})
      },

      goLvd(authorId) {
        this.$router.push({path: "/pages/LargeVipDetail", query: {aId: authorId}});
      },
      onScrollPull(e) {
        if (this.$el.querySelector('.vf-news')) {
          let innerHeight = this.$el.querySelector('.vf-news').clientHeight;
          let bottomHeight = this.$el.querySelector('.vf-bottom-tps').clientHeight;
          //let footerHeight = this.$el.querySelector('#footer').clientHeight;
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
          if (innerHeight <= scrollTop + document.documentElement.clientHeight) {
            if (this.sw == true) {
              // 将开关关闭
              this.sw = false;
              this.getuserCollection();
            }
          }
        }
      },
    },
    mounted() {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.onScrollPull)
      })
    },

  }
</script>
<style scoped>
  .vf-news {
    padding-bottom: 0rem !important;
  }

  .vf-bottom-tps {
    width: 80%;
    padding: 0px !important;
  }
</style>
